<template>
	<view class="app-problem">
		<view class="mode" v-for="(item,index) in dataList" :key="index">
			<view class="mode-title flex-box">
				<image :src="item.type[0]" class="icon-title"></image>
				<text class="title-text">{{item.type[1]}}</text>
			</view>
			<view class="mode-item flex-box" v-for="(emp,key) in item.list" :key="key" >
				<text class="item-circle"></text>
				<view class="box-1" @tap="jump('/pages/sub/Problem/problem_detail?typeid='+emp.id)">
					<view class="item-title one_ell">
						{{emp.title}}
					</view>
					<view class="one_ell">
							{{emp.descr}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList:[]
			};
		},
		created(){
			this.initData()
		},
		methods:{
			jump(para){
				uni.navigateTo({
					url:para
				})
			},
			initData(){
				this.$u.api.problemList()
				.then(res=>{
					if(res.status){
						this.dataList = res.msg
						return 
					}
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				})
				.catch(err=>{console.log(err)})
			}
		}
	}
</script>

<style lang="scss">
.mode{
	padding:0 20rpx;
	border-bottom:20rpx solid #f9f9f9;
	.mode-title{
		padding:20rpx 0;
		.icon-title{
			width: 52rpx;
			height: 52rpx;
			margin:0;
			margin-right:20rpx;
		}
		.title-text{
			font-weight: bold;
			font-size:32rpx;
			color:#000;
		}
	}
	.item-circle{
		width:20rpx;
		height:20rpx ;
		border:2px solid #e5e5e5;
		margin:20rpx;
		display: inline-block;
		border-radius: 50%;
	}
	.box-1{
		padding:15rpx 0;
		border-bottom:1px solid #eeeeee;
		&:last-child{
			border:0;
		}
	}
	.item-title{
		font-size:30rpx;
		color:#333333;
		font-weight: bold;
	}
	.mode-item{
		align-items: flex-start;
		font-size:24rpx;
		color:#bbb;
	}
}
</style>
